<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">	

	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>
	
	<script id='code'>				
		$(document).ready(function(){					
			var canvas = document.getElementById('canvas');
			var stage = new JTopo.Stage(canvas);
			//显示工具栏
			showJTopoToobar(stage);

			var scene = new JTopo.Scene();
			stage.showToolbar = true;
			scene.shadow = true;
			scene.backgroundColor = '0,0,0';
			scene.alpha = 1;
			stage.add(scene);
			
			var nodes = [];
			
			function create_node(name){
				var x = Math.random() * stage.width;
				var y = Math.random() * stage.height;
				var node = new JTopo.CircleNode(name);
				node.vx = Math.random() * 6 - 3;
				node.vy = Math.random() * 6 - 3;
				node.radius = 10;
				node.mass = node.radius;
				node.fillStyle = JTopo.util.randomColor();
				node.setLocation(x, y);
				scene.add(node);
				return node;
			}
			
			function link(a, b){
				var link = new JTopo.Link(a, b);
				b.node = a;
				a.node = b;
				scene.add(link);
			}
			
			var root = create_node('root');
			root.x = 300;
			root.y = 200;
			nodes.push(root);
			for(var i=0; i<7; i++){
				var node = create_node();
				nodes.push(node);
				link(root, node);
				root.isRoot = true;
			}
			
			for(var i=0; i<3; i++){
				var node = create_node();
				nodes.push(node);
				link(nodes[1], node);
				nodes[1].isRoot = true;
			}
			
			for(var i=0; i<8; i++){
				var node = create_node();
				nodes.push(node);
				link(nodes[2], node);
				nodes[2].isRoot = true;
			}
			
			var minDist = 100;
			var springAmount = 0.005;
			function spring(a, b){
				var dx = b.x - a.x;
				var dy = b.y - a.y;
				var dist = JTopo.util.getDistance(a, b);

				if(dist < minDist && (minDist - dist) >= 1 ){
					var d = (a.isRoot && b.isRoot) ? 0.02:0;
					var ax = dx * (springAmount + d);
					var ay = dy * (springAmount + d);
					//if(a != root){
						a.x -= ax;
						a.y -= ay;
					//}
					//if(b != root){
						b.x += ax;
						b.y += ay;
					//}
				}else if(dist > (minDist-20) && (dist - minDist - 20) >= 1 && (a.node == b || b.node == a)){
					var d = (a.isRoot && b.isRoot) ? 0:0.02;
					var ax = dx * (springAmount + d);
					var ay = dy * (springAmount + d);
					a.x += ax;
					a.y += ay;
					b.x -= ax;
					b.y -= ay;
				}
			}

			(function f(){
				for(var i=0; i<nodes.length; i++){
					for(var j=0; j<nodes.length; j++){
						if(j == i) continue;
						spring(nodes[i], nodes[j]);
					}
				}
				//setTimeout(f, 1000/10);
				requestAnimationFrame(f);
			})();
		});
	</script>
  </head>

  <body>

	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">
				<div id="content">					<canvas width="850" height="550" id="canvas"></canvas>	
					
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>
  
	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>

</html>